<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岩溶隧道智能监测系统</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#64748b'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <style>
        body {
            min-height: 1024px;
            background-color: #f8fafc;
        }

        .container {
            width: 1440px;
            margin: 0 auto;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="fixed top-0 left-0 w-full bg-white shadow-sm z-50">
        <div class="container flex items-center justify-between h-16 px-6">
            <div class="flex items-center space-x-2">
                <span class="text-2xl font-['Pacifico'] text-primary">logo</span>
                <span class="text-xl font-medium">隧道监测系统</span>
            </div>
            <div class="flex items-center space-x-6">
                <button class="flex items-center space-x-1 text-gray-600 hover:text-primary!rounded-button whitespace-nowrap">
                    <i class="fas fa-bell w-4 h-4 flex items-center justify-center"></i>
                    <span>通知</span>
                </button>
                <button class="flex items-center space-x-1 text-gray-600 hover:text-primary!rounded-button whitespace-nowrap">
                    <i class="fas fa-cog w-4 h-4 flex items-center justify-center"></i>
                    <span>设置</span>
                </button>
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                        <i class="fas fa-user text-gray-600"></i>
                    </div>
                    <span class="text-gray-700">管理员</span>
                </div>
            </div>
        </div>
    </div>
    <div class="container flex mt-16 mb-6">
        <div class="w-48 min-h-[calc(100vh-64px)] bg-white shadow-sm pt-6">
            <div class="px-4 py-2">
                <div class="text-sm font-medium text-gray-400">主导航</div>
                <div class="mt-2 space-y-1">
                    <a style="line-height: 50px;" href="./index1.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-exclamation-triangle mr-2"></i>数据采集监测
                    </a>
                    <a style="line-height: 50px;" href="./index2.html"
                        class="w-full px-3 py-2 text-sm text-left text-primary bg-blue-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-chart-line mr-2"></i>风险评估分析
                    </a>
                    <a style="line-height: 50px;" href="./index3.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-ambulance mr-2"></i>应急响应方案
                    </a>
                    <a style="line-height: 50px;" href="./index4.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-clipboard-list mr-2"></i>监测维护记录
                    </a>
                    <a style="line-height: 50px;" href="./keshi.html"
                    class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                    <i class="fas fa-clipboard-list mr-2"></i>可视页面展示
                </a>
                </div>
            </div>
        </div>
        <div class="flex-1 p-6 space-y-6">
            <div class="mb-6">
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">当前风险状态概览</div>
                        <button class="px-4 py-2 bg-red-50 text-red-500 rounded-button whitespace-nowrap">
                            <i class="fas fa-exclamation-circle mr-2"></i>发现 3 处风险
                        </button>
                    </div>
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-gray-600">隧道仰拱竖向隆起</span>
                                    <span class="text-red-500 font-medium">异常</span>
                                </div>
                                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                                    <div class="h-full bg-red-500" style="width: 85%"></div>
                                </div>
                                <div class="flex justify-between mt-1 text-sm">
                                    <span class="text-gray-500">变形量: 4.2mm</span>
                                    <span class="text-red-500">超出阈值(3.0mm)</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-gray-600">仰拱底部隆起</span>
                                    <span class="text-yellow-500 font-medium">警告</span>
                                </div>
                                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                                    <div class="h-full bg-yellow-500" style="width: 65%"></div>
                                </div>
                                <div class="flex justify-between mt-1 text-sm">
                                    <span class="text-gray-500">隆起量: 2.8mm</span>
                                    <span class="text-yellow-500">接近阈值(3.0mm)</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-gray-600">轨道板隆起变形</span>
                                    <span class="text-red-500 font-medium">异常</span>
                                </div>
                                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                                    <div class="h-full bg-red-500" style="width: 90%"></div>
                                </div>
                                <div class="flex justify-between mt-1 text-sm">
                                    <span class="text-gray-500">变形量: 3.6mm</span>
                                    <span class="text-red-500">超出阈值(3.0mm)</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-gray-600">道床板与仰拱填充脱离</span>
                                    <span class="text-red-500 font-medium">异常</span>
                                </div>
                                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                                    <div class="h-full bg-red-500" style="width: 95%"></div>
                                </div>
                                <div class="flex justify-between mt-1 text-sm">
                                    <span class="text-gray-500">脱离度: 2.9mm</span>
                                    <span class="text-red-500">超出阈值(2.0mm)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-1 gap-6 mb-6">
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">风险分布热力图</div>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateRiskTrendChart('today')">今日</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateRiskTrendChart('week')">本周</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateRiskTrendChart('month')">本月</button>
                        </div>
                    </div>
                    <div style="height: 300px; background-image: url('https://ai-public.mastergo.com/gen_page/map_placeholder_1280x720.png'); background-size: cover; background-position: center; border-radius: 8px;">
                    </div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">历史风险趋势</div>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateHistoryRiskTrendChart('daily')">按日</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateHistoryRiskTrendChart('week')">按周</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateHistoryRiskTrendChart('month')">按月</button>
                        </div>
                    </div>
                    <div id="riskTrendChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
                <div class="flex items-center justify-between mb-4">
                    <div class="text-gray-700 font-medium">风险评估详细记录</div>
                    <div class="flex space-x-4">
                        <div class="relative">
                            <input type="text" class="pl-8 pr-3 py-1 border border-gray-200 rounded-button text-sm w-48"
                                placeholder="搜索风险记录">
                            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                        <button class="px-3 py-1 text-sm text-primary hover:bg-blue-50 rounded-button whitespace-nowrap">
                            <i class="fas fa-file-export mr-1"></i>导出报告
                        </button>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-sm text-gray-500">
                                <th class="pb-3 px-4">时间</th>
                                <th class="pb-3 px-4">监测点</th>
                                <th class="pb-3 px-4">风险类型</th>
                                <th class="pb-3 px-4">风险等级</th>
                                <th class="pb-3 px-4">变形量/阈值</th>
                                <th class="pb-3 px-4">状态</th>
                                <th class="pb-3 px-4">操作</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm" id="riskAssessmentTableBody">
                            <!-- 表格数据将通过 JavaScript 动态添加 -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="grid grid-cols-1 gap-4 mb-6">
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">温湿度趋势</div>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateTempHumidChart('today')">今日</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateTempHumidChart('week')">本周</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateTempHumidChart('month')">本月</button>
                        </div>
                    </div>
                    <div id="tempHumidChart" style="width: 100%; height: 300px;"></div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">水位变化</div>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateWaterLevelChart('realtime')">实时</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateWaterLevelChart('24h')">24小时</button>
                        </div>
                    </div>
                    <div id="waterLevelChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
            <div class="grid grid-cols-1 gap-4">
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">车流量统计</div>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateTrafficChart('hourly')">小时</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateTrafficChart('daily')">日期</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap"
                                onclick="updateTrafficChart('monthly')">月份</button>
                        </div>
                    </div>
                    <div id="trafficChart" style="width: 100%; height: 300px;"></div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">形变监测</div>
                        <button class="px-3 py-1 text-sm text-primary hover:bg-blue-50 rounded-button whitespace-nowrap">
                            <i class="fas fa-download mr-1"></i>导出数据
                        </button>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="text-left text-sm text-gray-500">
                                    <th class="pb-3 px-4">监测点</th>
                                    <th class="pb-3 px-4">变形量</th>
                                    <th class="pb-3 px-4">状态</th>
                                </tr>
                            </thead>
                            <tbody class="text-sm">
                                <tr class="border-t">
                                    <td class="py-3 px-4">K32+580</td>
                                    <td class="py-3 px-4">3.6mm</td>
                                    <td class="py-3 px-4"><span class="text-green-500">正常</span></td>
                                </tr>
                                <tr class="border-t">
                                    <td class="py-3 px-4">K32+600</td>
                                    <td class="py-3 px-4">2.8mm</td>
                                    <td class="py-3 px-4"><span class="text-yellow-500">警告</span></td>
                                </tr>
                                <tr class="border-t">
                                    <td class="py-3 px-4">K32+620</td>
                                    <td class="py-3 px-4">2.9mm</td>
                                    <td class="py-3 px-4"><span class="text-red-500">异常</span></td>
                                </tr>
                                <tr class="border-t">
                                    <td class="py-3 px-4">K32+640</td>
                                    <td class="py-3 px-4">4.2mm</td>
                                    <td class="py-3 px-4"><span class="text-red-500">异常</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const riskTrendChart = echarts.init(document.getElementById('riskTrendChart'));
        const tempHumidChart = echarts.init(document.getElementById('tempHumidChart'));
        const waterLevelChart = echarts.init(document.getElementById('waterLevelChart'));
        const trafficChart = echarts.init(document.getElementById('trafficChart'));

        // 风险分布热力图数据
        const riskTrendData = {
            today: {
                xAxis: ['监测点1', '监测点2', '监测点3'],
                '轨道板隆起': [2, 3, 1],
                '仰拱隆起': [1, 2, 2],
                '底部隆起': [0, 1, 3],
                '道床板脱离': [1, 2, 1]
            },
            week: {
                xAxis: ['周一', '周二', '周三'],
                '轨道板隆起': [4, 3, 2],
                '仰拱隆起': [2, 1, 3],
                '底部隆起': [1, 2, 1],
                '道床板脱离': [2, 3, 2]
            },
            month: {
                xAxis: ['1月', '2月', '3月'],
                '轨道板隆起': [5, 4, 3],
                '仰拱隆起': [3, 2, 1],
                '底部隆起': [2, 3, 2],
                '道床板脱离': [1, 2, 3]
            }
        };

        // 历史风险趋势数据
        const historyRiskTrendData = {
            daily: {
                xAxis: ['1/1', '1/2', '1/3'],
                '轨道板隆起': [3, 2, 1],
                '仰拱隆起': [2, 3, 1],
                '底部隆起': [1, 2, 3],
                '道床板脱离': [2, 1, 2]
            },
            week: {
                xAxis: ['第1周', '第2周', '第3周'],
                '轨道板隆起': [9, 1, 6],
                '仰拱隆起': [3, 2, 7],
                '底部隆起': [2, 1, 9],
                '道床板脱离': [1, 8, 2]
            },
            month: {
                xAxis: ['1月', '2月', '3月'],
                '轨道板隆起': [5, 5, 4],
                '仰拱隆起': [2, 9, 1],
                '底部隆起': [3, 6, 1],
                '道床板脱离': [8, 1, 3]
            }
        };

        // 温湿度趋势数据
        const tempHumidData = {
            today: {
                xAxis: ['00:00', '06:00', '12:00'],
                temperature: [20, 22, 25],
                humidity: [50, 55, 60]
            },
            week: {
                xAxis: ['周一', '周二', '周三'],
                temperature: [21, 23, 24],
                humidity: [12, 56, 58]
            },
            month: {
                xAxis: ['1月', '2月', '3月'],
                temperature: [18, 20, 32],
                humidity: [48, 50, 13]
            }
        };

        // 水位变化数据
        const waterLevelData = {
            realtime: {
                xAxis: ['10:00', '11:00', '12:00'],
                data: [3.5, 1.6, 1.7]
            },
            '24h': {
                xAxis: ['00:00', '06:00', '12:00'],
                data: [1.2, 5.3, 1.4]
            }
        };

        // 车流量统计数据
        const trafficData = {
            hourly: {
                xAxis: ['00:00', '01:00', '02:00'],
                data: [100, 150, 120]
            },
            daily: {
                xAxis: ['1日', '2日', '3日'],
                data: [500, 600, 450]
            },
            monthly: {
                xAxis: ['1月', '2月', '3月'],
                data: [1500, 1800, 1600]
            }
        };

        // 风险评估详细记录数据
        const riskAssessmentData = [
            {
                time: '2023-10-01 08:00',
                location: 'K32+580',
                riskType: '隧道仰拱竖向隆起',
                riskLevel: '高',
                deformation: '4.2mm / 3.0mm',
                status: '异常',
                action: '查看详情'
            },
            {
                time: '2023-10-01 09:00',
                location: 'K32+600',
                riskType: '仰拱底部隆起',
                riskLevel: '中',
                deformation: '2.8mm / 3.0mm',
                status: '警告',
                action: '查看详情'
            },
            {
                time: '2023-10-01 10:00',
                location: 'K32+620',
                riskType: '轨道板隆起变形',
                riskLevel: '高',
                deformation: '3.6mm / 3.0mm',
                status: '异常',
                action: '查看详情'
            },
            {
                time: '2023-10-01 11:00',
                location: 'K32+640',
                riskType: '道床板与仰拱填充脱离',
                riskLevel: '高',
                deformation: '2.9mm / 2.0mm',
                status: '异常',
                action: '查看详情'
            }
        ];

        // 动态生成风险评估详细记录表格
        function populateRiskAssessmentTable() {
            const tableBody = document.getElementById('riskAssessmentTableBody');
            tableBody.innerHTML = ''; // 清空现有内容

            riskAssessmentData.forEach(item => {
                const row = document.createElement('tr');
                row.className = 'border-t';

                row.innerHTML = `
                    <td class="py-3 px-4">${item.time}</td>
                    <td class="py-3 px-4">${item.location}</td>
                    <td class="py-3 px-4">${item.riskType}</td>
                    <td class="py-3 px-4">${item.riskLevel}</td>
                    <td class="py-3 px-4">${item.deformation}</td>
                    <td class="py-3 px-4">
                        <span class="${item.status === '异常' ? 'text-red-500' : item.status === '警告' ? 'text-yellow-500' : 'text-green-500'}">
                            ${item.status}
                        </span>
                    </td>
                    <td class="py-3 px-4">
                        <button class="text-primary hover:underline">${item.action}</button>
                    </td>
                `;

                tableBody.appendChild(row);
            });
        }

        // 初始化风险分布热力图
        function initRiskTrendChart() {
            riskTrendChart.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['轨道板隆起', '仰拱隆起', '底部隆起', '道床板脱离']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: riskTrendData.today.xAxis
                },
                yAxis: {
                    type: 'value',
                    name: '风险事件数'
                },
                series: [
                    {
                        name: '轨道板隆起',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: riskTrendData.today['轨道板隆起']
                    },
                    {
                        name: '仰拱隆起',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: riskTrendData.today['仰拱隆起']
                    },
                    {
                        name: '底部隆起',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: riskTrendData.today['底部隆起']
                    },
                    {
                        name: '道床板脱离',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: riskTrendData.today['道床板脱离']
                    }
                ]
            });
        }

        // 初始化历史风险趋势图
        function initHistoryRiskTrendChart() {
            riskTrendChart.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['轨道板隆起', '仰拱隆起', '底部隆起', '道床板脱离']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: historyRiskTrendData.daily.xAxis
                },
                yAxis: {
                    type: 'value',
                    name: '风险事件数'
                },
                series: [
                    {
                        name: '轨道板隆起',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: historyRiskTrendData.daily['轨道板隆起']
                    },
                    {
                        name: '仰拱隆起',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: historyRiskTrendData.daily['仰拱隆起']
                    },
                    {
                        name: '底部隆起',
                        type: 'bar',
                        stack: 'total',
                        emphasis: 'series',
                        data: historyRiskTrendData.daily['底部隆起']
                    },
                    {
                        name: '道床板脱离',
                        type: 'bar',
                        stack: 'total',
                        emphasis: 'series',
                        data: historyRiskTrendData.daily['道床板脱离']
                    }
                ]
            });
        }

        // 初始化温湿度趋势图
        function initTempHumidChart() {
            tempHumidChart.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['温度', '湿度']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: tempHumidData.today.xAxis
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '温度 (°C)',
                        position: 'left'
                    },
                    {
                        type: 'value',
                        name: '湿度 (%)',
                        position: 'right'
                    }
                ],
                series: [
                    {
                        name: '温度',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 2,
                            color: '#f97316'
                        },
                        itemStyle: {
                            color: '#f97316'
                        },
                        data: tempHumidData.today.temperature
                    },
                    {
                        name: '湿度',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 1,
                        lineStyle: {
                            width: 2,
                            color: '#0ea5e9'
                        },
                        itemStyle: {
                            color: '#0ea5e9'
                        },
                        data: tempHumidData.today.humidity
                    }
                ]
            });
        }

        // 初始化水位变化图
        function initWaterLevelChart() {
            waterLevelChart.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: waterLevelData.realtime.xAxis
                },
                yAxis: {
                    type: 'value',
                    name: '水位 (m)'
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 2,
                            color: '#0ea5e9'
                        },
                        itemStyle: {
                            color: '#0ea5e9'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(14,165,233,0.3)' },
                                    { offset: 1, color: 'rgba(14,165,233,0)' }
                                ]
                            }
                        },
                        data: waterLevelData.realtime.data
                    }
                ]
            });
        }

        // 初始化车流量统计图
        function initTrafficChart() {
            trafficChart.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: trafficData.hourly.xAxis
                },
                yAxis: {
                    type: 'value',
                    name: '车流量 (辆/小时)'
                },
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#2563eb' },
                                    { offset: 1, color: '#60a5fa' }
                                ]
                            },
                            borderRadius: [4, 4, 0, 0]
                        },
                        data: trafficData.hourly.data
                    }
                ]
            });
        }

        // 更新风险分布热力图数据
        function updateRiskTrendChart(range) {
            riskTrendChart.setOption({
                xAxis: {
                    type: 'category',
                    data: riskTrendData[range].xAxis
                },
                series: [
                    {
                        name: '轨道板隆起',
                        data: riskTrendData[range]['轨道板隆起']
                    },
                    {
                        name: '仰拱隆起',
                        data: riskTrendData[range]['仰拱隆起']
                    },
                    {
                        name: '底部隆起',
                        data: riskTrendData[range]['底部隆起']
                    },
                    {
                        name: '道床板脱离',
                        data: riskTrendData[range]['道床板脱离']
                    }
                ]
            });
        }

        // 更新历史风险趋势图数据
        function updateHistoryRiskTrendChart(range) {
            riskTrendChart.setOption({
                xAxis: {
                    type: 'category',
                    data: historyRiskTrendData[range].xAxis
                },
                series: [
                    {
                        name: '轨道板隆起',
                        data: historyRiskTrendData[range]['轨道板隆起']
                    },
                    {
                        name: '仰拱隆起',
                        data: historyRiskTrendData[range]['仰拱隆起']
                    },
                    {
                        name: '底部隆起',
                        data: historyRiskTrendData[range]['底部隆起']
                    },
                    {
                        name: '道床板脱离',
                        data: historyRiskTrendData[range]['道床板脱离']
                    }
                ]
            });
        }

        // 更新温湿度趋势图数据
        function updateTempHumidChart(range) {
            tempHumidChart.setOption({
                xAxis: {
                    type: 'category',
                    data: tempHumidData[range].xAxis
                },
                series: [
                    {
                        name: '温度',
                        data: tempHumidData[range].temperature
                    },
                    {
                        name: '湿度',
                        data: tempHumidData[range].humidity
                    }
                ]
            });
        }

        // 更新水位变化图数据
        function updateWaterLevelChart(range) {
            waterLevelChart.setOption({
                xAxis: {
                    type: 'category',
                    data: waterLevelData[range].xAxis
                },
                series: [
                    {
                        data: waterLevelData[range].data
                    }
                ]
            });
        }

        // 更新车流量统计图数据
        function updateTrafficChart(range) {
            trafficChart.setOption({
                xAxis: {
                    type: 'category',
                    data: trafficData[range].xAxis
                },
                series: [
                    {
                        data: trafficData[range].data
                    }
                ]
            });
        }

        // 初始化所有图表和数据
        function initCharts() {
            initRiskTrendChart();
            initHistoryRiskTrendChart();
            initTempHumidChart();
            initWaterLevelChart();
            initTrafficChart();
            populateRiskAssessmentTable(); // 填充风险评估详细记录表格
        }

        // 页面加载完成后初始化所有图表和数据
        window.onload = initCharts;
    </script>
</body>

</html>